<?php include view_path() . 'header_total.php'; ?>
<link rel="stylesheet" type="text/css" href="<?php echo css_url() . 'body_general.css' ?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url() . 'general_form.css' ?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url() . '960grid/960.css' ?>">
<section id="body">
    <div class="body-container">
        <form class="choose-category" action="<?php echo site_url() . "/user_group3/jobs/get_job" ?>" method="GET">
            <div class="container_12" style="margin-bottom: 20px">
                <div class="grid_2 heading_960"> Choose Field: </div>
                <div class="grid_4">
                    <div class="styled-select" style="width:100%">
                        <select id="parent-field" name="parent-category">
                            <option selected="selected"></option>
                            <?php foreach ($Category as $row): ?>
                                <option value="<?php echo $row['CategoryID']; ?>"><?php echo $row['CategoryName'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
           </div>

            <div class="container_12" style="margin-bottom: 20px">
                <div class="grid_2 heading_960"> Choose Job: </div>
                <div class="grid_4">
                    <div class="styled-select" style="width:100%">
                        <select id="child-field" name="child-category">
                            <option value="0" selected></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="container_12 margin-bottom">
                <div class="grid_2"><div id="add-filter-btn" class="add-btn">+ Filter</div></div>
                <div class="grid_2"><input type="checkbox" name="skill-match"><span style="color: #B9B9B9">Skill Match</span></div>
<!--                <div class="grid_4"><input type="checkbox" name="location-match"><span style="color: #B9B9B9">Most near Location</span></div>-->
            </div>
            
            <div class="container_12 margin-bottom">
                <div class="grid_10 heading_960" style="font-size:1em;"><b>Note: </b>
                    The same filters will be consider as OR search.
                    Different filters will be consider as AND search.</div>
            </div>
            
            <div id="filter-section">
                <div class="container_12" style="margin-bottom: 10px;">
                    <div class="grid_2">
                        <select class="title-handler" name="filter-title[]">
                            <option value="Subject">Subject</option>
                            <option value="Salary">Salary</option>
                            <option value="Province">Province</option>
                            <option value="City">City</option>
                            <option value="District">District</option>
                        </select>
                    </div>
                    
                    <div class="grid_2">
                        <select name="filter-condition[]">
                            <option value=">=">>=</option>
                            <option value="<="><=</option>
                            <option value="LIKE" selected>have</option>
                        </select>
                    </div>
                    
                    <div class="grid_2"><input name="filter-value[]" type="text" placeholder="value"></div>                 
                </div>
            </div>
            
            <button type="submit" class="submit-bt" style="position:absolute; bottom:0; left: 350px; width:auto">Search</button>
        </form>

        <script>
            var Fields = <?php echo json_encode($Category); ?>;

            var updateCategoryHandler = function() {
                $("#parent-field").on("change", function() {
                    var id = $(this).val();
                    Fields.forEach(function(FieldTemp) {
                        if (FieldTemp['CategoryID'] == id) {
                            ChildCategories = FieldTemp['Childs'];
                        }
                    });

                    data = '<option selected="selected"></option>';
                    ChildCategories.forEach(function(Child) {
                        data += '<option value="{0}">{1}</option>'.format(Child['CategoryID'], Child['CategoryName']);
                    });
                    $("#child-field").html(data);
                    $("#child-field").parent().css("display", "inline-block");
                });
            }
            /* Filter handlers */
            var updateChildCategoryHandler = function() {
                $('#child-field').on('change', function() {
                        
                });
            }
            
            var filterButtonClickHandler = function(){
                $("#add-filter-btn").on("click",function(){
                    HTMLContent = $("#filter-section").children(".container_12:first-child").html();
                    HTMLContent = '<div class="container_12">' + HTMLContent + '<div class="grid_2"><button class="delete-filter">-</button></div>'
                                + '</div>'
                    $("#filter-section").append(HTMLContent);
                    update();
                });
            }
            
            var deleteFilterButtonHandler = function(){
                $("button.delete-filter").on("click",function(e){
                    e.preventDefault();
                    $(this).parent().parent().remove();
                });
            }
            
            var titleFilterHandler = function(){
                $(".title-handler").on("change",function(){
                    val = $(this).val();
                    html = "";
                    if(val == "Province" || val == "District" || val == "City" || val == "Subject" ||val == "Province"){
                        html += '<option value="LIKE" selected>have</option>';
                    }
                    else if(val == "Salary"){
                        html += '<option value=">=">>=</option><option value="<="><=</option>';
                    }
                    $(this).parent().next().children().html(html);
                });
            }
            
            /* End of Filter handlers */
            /*Update only one */
            filterButtonClickHandler();
            /*End of update only one */
            
            var update = function() {
                updateCategoryHandler();
                deleteFilterButtonHandler();
                titleFilterHandler();
            }

            update();
        </script>
    </div>
</section>

<script src="<?php echo asset_url() . "js/string_helper.js" ?>"></script>
<?php include js_url(true) . '/validate_things.php' ?>


<?php include '/../../footer.php'; ?>